﻿@{
    ViewBag.Title = "Index";
}

<h2>Penetration and availability</h2>

<script type="text/javascript">
    google.load("visualization", "1", { packages: ["corechart"] });
    google.setOnLoadCallback(drawlineChart);
    function drawlineChart() {

        $.post('/DashBoard/GetPenetrationDashBoard', {},
            function (data) {
                var tdata = new google.visualization.DataTable(data,0.5);

                var options = {
                    title: "Penetration",
                    legend: {position: 'right', textStyle: {color: 'blue', fontSize: 10}},
                    is3D:true
                };

                var chart = new google.visualization.PieChart(document.getElementById('chart_line_outletperformance_div'));
                chart.draw(tdata, options);
            });
    }
</script>
<script type="text/javascript">
    google.load("visualization", "1", { packages: ["corechart"] });
    google.setOnLoadCallback(drawlineChart);
    function drawlineChart() {
        $.post('/DashBoard/GetProductAvalibiltyDashBoard', {},
            function (data) {
                var tdata = new google.visualization.DataTable(data, 0.5);

                var options = {
                    title: "Availability On Visited Outlet",
                    legend: { position: 'right', textStyle: { color: 'Red', fontSize: 6} },
                    hAxis: { title: 'Product' },
                    vAxis: {title: 'Percentage', minValue: 0, baseline: 0},
                   
                };
                var chart = new google.visualization.ColumnChart(document.getElementById('chart_Availabity_div'));
                chart.draw(tdata, options);
            });
    }
</script>
<table>
    <tr>
        <td>
            <div id="chart_line_outletperformance_div" style="width: 500px; height: 300px;">
            </div>
        </td>
        <td>
        <div id="chart_StackedBar_div" style="width: 500px; height: 300px;">
            </div>
        
        </td>
    </tr>
    <tr>
        <td colspan="2">
            <div id="chart_Availabity_div" style="width: 1000px; height: 300px;">
            </div>
        </td>
        <td>
        
    </tr>
</table>

